<template>
  <div class="water-product-box bgcFFF">
    <div class="product-show-box line-bottom"  v-for="(item,index) in data" :key="index" >
      <img :src="item.src" alt="">
      <div class="msg pr">
        <p>{{item.name}}</p>
        <p>规格 {{item.model}}</p>
        <p class="pa">
          <span class="set-num flr">
            <i class="iconfont" @click.stop="handleMinus(item)">-</i>
            <i class="iconfont color45454D">{{item.number}}</i>
            <i class="iconfont" @click.stop="handleAdd(item)">+</i>
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props: ['data'],
    methods: {
      //减
      handleMinus(item){
        this.$emit('send-minus',item)
      },
      //加
      handleAdd(item){
        this.$emit('send-add',item)
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/base.scss";

  .water-product-box {

    .product-show-box{
      display: flex;
      width: 100%;
      height: 104px;
      padding:12px 15px;
      box-sizing: border-box;

      img{
        width: 80px;
        /*height: 80px;*/
        max-height:80px;
        vertical-align: top;
      }

      .msg{
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 0 0 0 15px;
        box-sizing: border-box;

        p:nth-child(2){
          font-size: 12px;
          color: #999AA3;
        }

        p:nth-child(3){
          position: absolute;
          bottom:0;
          left:0;
          width: 100%;
          padding: 0 0 0 15px;
          box-sizing: border-box;
          color: #F54E4E;

          span.set-num{
            display: inline-block;
            height: 28px;
            font-size: 0;
            text-align: center;

            i{
              font-size: 14px;
              display: inline-block;
              width: 28px;
              line-height: 28px;
              border:1px solid #C5C5CC;
              color: #757575;
            }

            i:first-child{
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
            }

            i:nth-child(2){
              min-width: 36px;
              margin-left: -1px;
            }

            i:last-child{
              border-top-right-radius: 2px;
              border-bottom-right-radius: 2px;
              margin-left: -1px;
            }
          }
        }
      }
    }

  }

  @media screen and (min-width:321px) and (max-width: 375px){
     .product-car-box .box .van-row .msg{
      padding-left: 2px;
    }
  }
</style>
